<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
  <title>bootstrap-table - 光年(Light Year Admin)后台管理系统模板</title>
  <link rel="icon" href="favicon.ico" type="image/ico">
  <meta name="keywords" content="LightYear,光年,后台模板,后台管理系统,光年HTML模板">
  <meta name="description" content="LightYear是一个基于Bootstrap v3.3.7的后台管理系统的HTML模板。">
  <meta name="author" content="yinqi">
  <link href="../../../static/css/bootstrap.min.css" rel="stylesheet">
  <link href="../../../static/css/materialdesignicons.min.css" rel="stylesheet">
  <link href="../../../static/css/animate.css" rel="stylesheet">
  <link href="../../../static/css/style.min.css" rel="stylesheet">
  <link href="../../../static/js/bootstrap-table/bootstrap-table.min.css" rel="stylesheet">
  <!--对话框-->
  <link rel="stylesheet" href="../../../static/js/jconfirm/jquery-confirm.min.css">
</head>
  
<body>

<div class="modal fade" id="add_frame" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h4 class="modal-title" id="myModalLabel">

        </h4>
      </div>
      <div class="modal-body">
        <form class="form-horizontal" role="form" id="add_form">
                    <input type="hidden" id="id">
          <div class="form-group">
            <label for="classroomName_add" class="col-sm-4 control-label">请输入教室名称：</label>
            <div class="col-sm-8">
              <input type="text" class="form-control" id="classroomName_add" autocomplete="off"/>
            </div>
          </div>
          <div class="form-group">
            <label for="classroomArea_add" class="col-sm-4 control-label">请选择教室所属区域：</label>
            <div class="col-sm-8">
              <select class="form-control" style="width: 100px" id="classroomArea_add" name="classroomArea_select">
              </select>
            </div>
          </div>
          <div class="form-group">
            <label for="classroomCapacity_add" class="col-sm-4 control-label">请输入教室可容纳人数：</label>
            <div class="col-sm-8">
              <input type="text" class="form-control" id="classroomCapacity_add" autocomplete="off"/>
            </div>
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
        <button type="submit" class="btn btn-primary" id="add_save_btn">保存</button>
      </div>
    </div>
  </div>
</div>

<div class="container-fluid p-t-15">
  <div class="row">
    <div class="col-lg-12">
      <div class="card">
        <div class="card-header"><h4>教室管理</h4></div>
        <div class="card-body">
          <form id="search-form" class="search-bar" method="get" action="#!" role="form">

              <div class="row">
                <div class="col-xs-3">
                  <div class="input-group m-b-10">
                    <span class="input-group-addon" id="sizing-addon2">教室名称</span>
                    <input type="text" class="form-control" name="classroomName-search" placeholder="请输入教室名称" aria-describedby="sizing-addon2" autocomplete="off">
                  </div>
                </div>
                <div class="col-xs-3">
                  <div class="input-group m-b-10">
                    <span class="input-group-addon" id="sizing-addon1">教室所属区域</span>
                    <select class="form-control" style="width: 100px" id="classroomArea-search" name="classroomArea_select">
                    </select>
                  </div>
                </div>
                <div class="col-xs-3">
                  <div class="input-group m-b-10">
                    <span class="input-group-addon">教室状态</span>
                    <div class="col-xs-6">
                      <label class="radio-inline" for="status_radio_usable">
                        <input type="radio" id="status_radio_usable" name="status-radios" value="1" checked="checked">
                        可用
                      </label>
                      <label class="radio-inline" for="status_radio_used">
                        <input type="radio" id="status_radio_used" name="status-radios" value="2">
                        已用
                      </label>
                      <label class="radio-inline" for="status_radio_safeguard">
                        <input type="radio" id="status_radio_safeguard" name="status-radios" value="0">
                        维护
                      </label>
                    </div>
                  </div>
                </div>
            </div>
          </form>

          <div id="toolbar" class="toolbar-btn-action">
            <button id="btn_add" type="button" class="btn btn-primary m-r-5">
              <span class="mdi mdi-plus" aria-hidden="true"></span>新增
            </button>
            <button id="btn_status_usable" type="button" class="btn btn-success m-r-5">
              <span class="mdi mdi-check" aria-hidden="true"></span>可用
            </button>
            <button id="btn_status_used" type="button" class="btn btn-warning m-r-5">
              <span class="mdi mdi-block-helper" aria-hidden="true"></span>已用
            </button>
            <button id="btn_status_safeguard" type="button" class="btn btn-dark m-r-5">
              <span class="mdi mdi-wrench" aria-hidden="true"></span>维护
            </button>
            <button id="btn_delete" type="button" class="btn btn-danger m-r-5">
              <span class="mdi mdi-window-close" aria-hidden="true"></span>删除
            </button>
            <button id="btn_search" type="button" class="btn btn-pink m-r-5">
              <span class="mdi mdi-magnify" aria-hidden="true"></span>搜索
            </button>
            <button id="btn_reset" type="button" class="btn btn-secondary">
              <span class="mdi mdi-autorenew" aria-hidden="true"></span>重置
            </button>
          </div>
          <table id="tb_classrooms"></table>
 
        </div>
      </div>
    </div>

    
  </div>
  
</div>

<script type="text/javascript" src="../../../static/js/jquery.min.js"></script>
<script type="text/javascript" src="../../../static/js/bootstrap.min.js"></script>
<script type="text/javascript" src="../../../static/js/perfect-scrollbar.min.js"></script>
<script type="text/javascript" src="../../../static/js/bootstrap-table/bootstrap-table.min.js"></script>
<script type="text/javascript" src="../../../static/js/bootstrap-table/bootstrap-table-zh-CN.min.js"></script>

<!--行内编辑插件-->
<link href="../../../static/js/x-editable/1.5.1/bootstrap3-editable/css/bootstrap-editable.min.css" rel="stylesheet">
<script type="text/javascript" src="../../../static/js/x-editable/1.5.1/bootstrap3-editable/js/bootstrap-editable.min.js"></script>
<script type="text/javascript" src="../../../static/js/bootstrap-table/extensions/editable/bootstrap-table-editable.min.js"></script>

<script type="text/javascript" src="../../../static/js/main.min.js"></script>

<!--消息提示-->
<script src="../../../static/js/bootstrap-notify.min.js"></script>
<script type="text/javascript" src="../../../static/js/lightyear.js"></script>

<!--对话框-->
<script src="../../../static/js/jconfirm/jquery-confirm.min.js"></script>
<script type="text/javascript">
  getAreas();
  var classroom = {
    classroomName : '',
    classroomArea : '',
    status: ''
  };
  $("#btn_search").click(()=>{
      let classroomName_search = $("input[name='classroomName-search']").val();
      let classroomArea_search = $("#classroomArea-search").val();
      let status_radios = $("input:radio[name='status-radios']:checked").val();
      if(classroomName_search!==''||classroomArea_search!==''
              || status_radios!==''){
        classroom = {
          classroomName : classroomName_search,
          classroomArea : parseInt(classroomArea_search),
          status : parseInt(status_radios)
        }
        $('#tb_classrooms').bootstrapTable('refresh');
      }
  });

  $("#btn_reset").click(()=>{
    $("#search-form")[0].reset();
    classroom = {
      classroomName : '',
      classroomArea : '',
      status: ''
    };
    $('#tb_classrooms').bootstrapTable('refresh', {pageSize:this.pageSize});
  });

    $("#btn_add").click(()=>{
      $("#myModalLabel").empty();
      $("#myModalLabel").append("新增班级")
      $("#add_form")[0].reset();
      $("#id").val('');//清空id
      $("#add_frame").modal({
        backdrop:"static"
      });
    });

    $("#add_save_btn").click(()=>{
        lightyear.loading('show');
      if($("#id").val()=='') {
        $.ajax({
          type: 'POST',
          url: '/ssm/classroom/classroom',
          data: JSON.stringify({
            "classroomName": $("#classroomName_add").val(),
            "classroomArea": $("#classroomArea_add").val(),
            "classroomCapacity": $("#classroomCapacity_add").val()
          }),
          dataType: 'json',
          contentType: 'application/json',
          success: (data) => {
            if (data.code === 20000) {
              $("#add_frame").modal('hide');
              lightyear.loading('hide');
              lightyear.notify('保存成功~', 'success', 3000);
              $('#tb_classrooms').bootstrapTable('refresh', {pageSize: this.pageSize});
            }
          }
        });
      }else{
        $.ajax({
          type: 'PUT',
          url: "/ssm/classroom/classroom",
          data: JSON.stringify({
            "id" : $("#id").val(),
            "classroomName": $("#classroomName_add").val(),
            "classroomArea": $("#classroomArea_add").val(),
            "classroomCapacity": $("#classroomCapacity_add").val()
          }),
          dataType: 'json',
          contentType: 'application/json',
          success: function (data, status) {
            if (data.code === 20000) {
              lightyear.loading('hide');
              lightyear.notify('修改成功~', 'success', 3000);
              $("#add_frame").modal('hide');
              $('#tb_classrooms').bootstrapTable('refresh', {pageSize:this.pageSize});
            } else {
              lightyear.loading('hide');
              lightyear.notify('修改失败~', 'danger', 100);
            }
          },
          error: function () {
            lightyear.loading('hide');
            lightyear.notify('服务器错误，请稍后再试~', 'danger', 100);
            $('#tb_classrooms').bootstrapTable('refresh', {pageSize:10});
          }
        });
      }
    });

  $("#btn_status_usable").click(()=>{
    let rows = $("#tb_classrooms").bootstrapTable("getAllSelections");
    if(rows.length<=0){
      lightyear.notify('请至少选择一条数据~', 'warning', 1000);
    }else{
      let ids = "";
      let classroomNames = "";
      $.each(rows,(index,value)=>{
        ids += value.id + "-";
        classroomNames += value.classroomName + ",";
      });
      ids = ids.substring(0,ids.length-1);
      classroomNames = classroomNames.substring(0,classroomNames.length-1);
      ids += ".usable";
      $.confirm({
        title: '请注意',
        content: '你确定要将教室名称为'+classroomNames+' 的教室的状态改为可用吗?',
        type: 'green',
        buttons: {
          confirm: {
            text: '确认变更状态',
            btnClass: 'btn-primary',
            action: ()=>{
              lightyear.loading('show');
              $.ajax({
                type: 'PATCH',
                url: '/ssm/classroom/classroom/status',
                dataType: 'json',
                data: JSON.stringify(ids),
                contentType: 'application/json',
                success:(data)=>{
                  if(data.code === 20000){
                    lightyear.loading('hide');
                    lightyear.notify('更新教室状态成功~', 'success', 3000);
                    $('#tb_classrooms').bootstrapTable('refresh', {pageSize:this.pageSize});
                  }
                }
              })
            }
          },
          cancel: {
            text: '取消变更状态'
          }
        }
      });
    };

  });

  $("#btn_status_safeguard").click(()=>{
    let rows = $("#tb_classrooms").bootstrapTable("getAllSelections");
    if(rows.length<=0){
      lightyear.notify('请至少选择一条数据~', 'warning', 1000);
    }else{
      let ids = "";
      let classroomNames = "";
      $.each(rows,(index,value)=>{
        ids += value.id + "-";
        classroomNames += value.classroomName + ",";
      });
      ids = ids.substring(0,ids.length-1);
      classroomNames = classroomNames.substring(0,classroomNames.length-1);
      ids += ".safeguard";
      $.confirm({
        title: '请注意',
        content: '你确定要将教室名称为'+classroomNames+' 的教室的状态改为维护吗?',
        type: 'orange',
        buttons: {
          confirm: {
            text: '确认变更状态',
            btnClass: 'btn-primary',
            action: ()=>{
              lightyear.loading('show');
              $.ajax({
                type: 'PATCH',
                url: '/ssm/classroom/classroom/status',
                dataType: 'json',
                data: JSON.stringify(ids),
                contentType: 'application/json',
                success:(data)=>{
                  if(data.code === 20000){
                    lightyear.loading('hide');
                    lightyear.notify('更新教室状态成功~', 'success', 3000);
                    $('#tb_classrooms').bootstrapTable('refresh', {pageSize:this.pageSize});
                  }
                }
              })
            }
          },
          cancel: {
            text: '取消变更状态'
          }
        }
      });
    };
  });

  $("#btn_status_used").click(()=>{
    let rows = $("#tb_classrooms").bootstrapTable("getAllSelections");
    if(rows.length<=0){
      lightyear.notify('请至少选择一条数据~', 'warning', 1000);
    }else{
      let ids = "";
      let classroomNames = "";
      $.each(rows,(index,value)=>{
        ids += value.id + "-";
        classroomNames += value.classroomName + ",";
      });
      ids = ids.substring(0,ids.length-1);
      classroomNames = classroomNames.substring(0,classroomNames.length-1);
      ids += ".used";
      $.confirm({
        title: '请注意',
        content: '你确定要将教室名称为'+classroomNames+' 的教室的状态改为已用吗?',
        type: 'orange',
        buttons: {
          confirm: {
            text: '确认变更状态',
            btnClass: 'btn-primary',
            action: ()=>{
              lightyear.loading('show');
              $.ajax({
                type: 'PATCH',
                url: '/ssm/classroom/classroom/status',
                dataType: 'json',
                data: JSON.stringify(ids),
                contentType: 'application/json',
                success:(data)=>{
                  if(data.code === 20000){
                    lightyear.loading('hide');
                    lightyear.notify('更新教室状态成功~', 'success', 3000);
                    $('#tb_classrooms').bootstrapTable('refresh', {pageSize:this.pageSize});
                  }
                }
              })
            }
          },
          cancel: {
            text: '取消变更状态'
          }
        }
      });
    };
  });

    $("#btn_delete").click(()=>{
      let rows = $("#tb_classrooms").bootstrapTable("getAllSelections");
      if(rows.length<=0){
        lightyear.notify('请至少选择一条数据~', 'warning', 1000);
      }else{
        let ids = "";
        let classroomNames = "";
        $.each(rows,(index,value)=>{
          ids += value.id + "-";
          classroomNames += value.classroomName + ",";
        });
        ids = ids.substring(0,ids.length-1);
        classroomNames = classroomNames.substring(0,classroomNames.length-1);
        $.confirm({
          title: '请注意',
          content: '你确定要删除教室名称为'+classroomNames+' 的教室吗?',
          type: 'red',
          buttons: {
            confirm: {
              text: '确认删除',
              btnClass: 'btn-primary',
              action: ()=>{
                lightyear.loading('show');
                $.ajax({
                  type: 'DELETE',
                  url: '/ssm/classroom/classroom/'+ ids,
                  dataType: 'json',
                  success:(data)=>{
                    if(data.code === 20000){
                      lightyear.loading('hide');
                      lightyear.notify('删除教室成功~', 'success', 3000);
                      $('#tb_classrooms').bootstrapTable('refresh', {pageSize:this.pageSize});
                    }
                  }
                })
              }
            },
            cancel: {
              text: '取消删除'
            }
          }
        });
      };
    });

  function getAreas(){
    $("select[name='classroomArea_select']").empty()
    $.ajax({
      type:'GET',
      url: '/ssm/area/area',
      dataType: 'json',
      success:(data)=>{
        if(data.code===20000){
          let areas =  data.data.areas;
          let option = $("<option></option>").append('请选择');
          option.appendTo("select[name='classroomArea_select']");
          $.each(areas,(index,value)=>{
            let option = $("<option></option>").append(value.areaName).attr("value",value.id);
            option.appendTo("select[name='classroomArea_select']");

          })

        }
      }
    })
  };

$('#tb_classrooms').bootstrapTable({
    classes: 'table table-bordered table-hover table-striped',
    url: '/ssm/classroom/classroom/page',
    method: 'get',
    dataType : 'json',        // 因为本示例中是跨域的调用,所以涉及到ajax都采用jsonp,
    uniqueId: 'id',            // 为每一行指示唯一的标识符。
    idField: 'id',             // 指明哪个字段将用作复选框/单选框值，与selectItemName对应。
    toolbar: '#toolbar',       // 工具按钮容器 jQuery选择指示工具栏，例如： #toolbar, .toolbar，或DOM节点。
    //clickToSelect: true,     // 是否启用点击选中行
    showColumns: true,         // 是否显示所有的列
    showRefresh: true,         // 是否显示刷新按钮
    
    //showToggle: true,        // 是否显示详细视图和列表视图的切换按钮(clickToSelect同时设置为true时点击会报错)

    pagination: true,                    // 是否显示分页
    sortOrder: "asc",                    // 排序方式

    sidePagination: "server",            // 分页方式：client客户端分页，server服务端分页
    pageNumber: 1,                       // 初始化加载第一页，默认第一页
    pageSize: 10,                        // 每页的记录行数
    pageList: [10, 25, 50, 100],         // 可供选择的每页的行数
    //search: true,                      // 是否显示表格搜索，此搜索是客户端搜索
    queryParamsType: '',
    queryParams: function(params) { // 传递参数
      var temp = {
        pageNum: params.pageNumber,
        pageSize: params.pageSize,
        classroomName: classroom.classroomName,
        classroomArea: classroom.classroomArea,
        status: classroom.status
      };
      return temp;
    },
    responseHandler:function (res){
      let nres = [];
      nres.push({total:res.data.pageInfo.total,rows:res.data.pageInfo.list})
      return nres[0];
    },

  //showExport: true,        // 是否显示导出按钮, 导出功能需要导出插件支持(tableexport.min.js)
    //exportDataType: "basic", // 导出数据类型, 'basic':当前页, 'all':所有数据, 'selected':选中的数据
  
    columns: [{
        checkbox: true    // 是否显示复选框
    }, {
        field: 'id',
        title: 'ID',
        sortable: true    // 是否排序
    }, {
        field: 'classroomName',
        title: '教室名称',
      editable: {
          type: 'text',
          title: '教室名称'
      }
    }, {
        field: 'area.areaName',
        title: '教室所属区域'
    }, {
      field: 'area.id',
      visible: false
    },{
      field: 'classroomCapacity',
      title: '教室可容纳人数',
      editable: {
        type: 'number',
        title: '教室可容纳人数'
      }
    },{
      field: 'status',
      title: '状态',
      editable: {
        type: 'select',
        title: "状态",
        source: [
          { value: 1, text: '可用'},
          { value: 2, text: '已用'},
          { value: 0, text: '维护'}

        ],
        noeditFormatter: function (value, row, index) {
          var result;
          if (value === 1) {
            result = { filed: "status", value: "可用", class: "label label-success" };
          } else if (value === 2) {
            result = { filed: "status", value: "已用", class: "label label-danger" };
          } else if (value == 0) {
            result = { filed: "status", value: "维护", class: "label label-success" };
          }

          return result; // 这里对bootstrap-table-editable.min.js做了一些修改，让其能接收class
        },
        highlight: false
      }
    }, {
        field: 'createTime',
        title: '创建时间'
    }, {
        field: 'updateTime',
        title: '修改时间',
        sortable: true
    }, {
        field: 'operate',
        title: '操作',
        formatter: btnGroup,  // 自定义方法
        events: {
            'click .edit-btn': function (event, value, row, index) {
              editClassroom(row);
            },
            'click .del-btn': function (event, value, row, index) {
              delClassroom(row);
            },
            'click .show-btn': function (event, value, row, index) {
                showUser(row);
            }
        }
    }],

    onEditableSave: function (field, row, oldValue, $el) {
      console.log(row)
      lightyear.loading('show');
        $.ajax({
            type: 'PUT',
            url: "/ssm/classroom/classroom",
            data: JSON.stringify({
              "id" : row.id,
              "classroomName" : row.classroomName,
              "classroomArea" : row.classroomArea,
              "classroomCapacity" : row.classroomCapacity,
              "status" : row.status
            }),
            dataType: 'json',
            contentType: 'application/json',
            success: function (data, status) {
                if (data.code === 20000) {
                    // 这里的状态显示有自定义样式区分，做单行的更新
                  lightyear.loading('hide');
                  lightyear.notify('修改成功~', 'success', 3000);
                  $('#tb_classrooms').bootstrapTable('refresh', {pageSize:this.pageSize});
                } else {
                  lightyear.loading('hide');
                  lightyear.notify('修改失败~', 'danger', 100);
                  // $('#tb_users').bootstrapTable('refresh', {pageSize:10});
                }
            },
            error: function () {
              lightyear.loading('hide');
              lightyear.notify('服务器错误，请稍后再试~', 'danger', 100);
              $('#tb_classrooms').bootstrapTable('refresh', {pageSize:10});
            }
        });
    },

    onLoadSuccess: function(data){
        $("[data-toggle='tooltip']").tooltip();
    }
});

// 操作按钮
function btnGroup ()
{
    let html =
        '<a href="#!" class="btn btn-xs btn-default m-r-5 edit-btn" title="编辑" data-toggle="tooltip"><i class="mdi mdi-pencil"></i></a>' +
        '<a href="#!" class="btn btn-xs btn-default m-r-5 show-btn" title="查看" data-toggle="tooltip"><i class="mdi mdi-eye"></i></a>' +
        '<a href="#!" class="btn btn-xs btn-default del-btn" title="删除" data-toggle="tooltip"><i class="mdi mdi-window-close"></i></a>';
    return html;
}

// 操作方法 - 编辑
function editClassroom(row)
{
  $("#myModalLabel").empty();
  $("#myModalLabel").append("编辑班级")
  $("#add_form")[0].reset();
  $("#id").val(row.id);
  $("#classroomName_add").val(row.classroomName);
  $("#classroomArea_add").val(row.area.id);
  $("#classroomCapacity_add").val(row.classroomCapacity);
  $("#add_frame").modal({
    backdrop:"static"
  });
}
// 操作方法 - 删除
function delClassroom(row)
{
  $.confirm({
    title: '请注意',
    content: '你确定要删除教室名称为 '+row.classroomName+' 的教室吗?',
    type: 'red',
    buttons: {
      confirm: {
        text: '确认删除',
        btnClass: 'btn-primary',
        action: ()=>{
          lightyear.loading('show');
          $.ajax({
            type: 'DELETE',
            url: '/ssm/classroom/classroom/'+ row.id,
            dataType: 'json',
            success:(data)=>{
              if(data.code === 20000){
                lightyear.loading('hide');
                lightyear.notify('删除成功~', 'success', 3000);
                $('#tb_classrooms').bootstrapTable('refresh', {pageSize:this.pageSize});
              }
            }
          });
        }
      },
      cancel: {
        text: '取消删除'
      }
    }
  });

}
// 操作方法 - 查看
function showUser()
{
    alert('查看详细');
}
</script>


</body>
</html>